<template>
    <div class="operation">
        <form class="operation-search-form" @submit.prevent="refreshUserData">
            <!-- <el-input placeholder="请输入姓名" suffix-icon="el-icon-search" v-model="search_user_name" @blur="refreshUserData">
            </el-input>
            <button type="submit" hidden></button> -->
            <el-input placeholder="请输入内容" v-model="search_value" class="input-with-select">
                <el-select v-model="search_type" slot="prepend" placeholder="请选择">
                    <el-option label="手机号" value="mobile"></el-option>
                    <el-option label="姓名" value="name"></el-option>
                    <el-option label="账户名" value="userName"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="refreshUserData"></el-button>
            </el-input>
        </form>
        <div class="operation-row">
            <div class="operation-block" @click="refreshUserData">
                <i class="el-icon-refresh"></i>
                <span>刷新</span>
            </div>
            <div class="operation-block" @click="add">
                <i class="el-icon-circle-plus" style="color: #3784f3;"></i>
                <span>新增</span>
            </div>
            <div class="operation-block" @click="importExcel">
                <i class="el-icon-document"></i>
                <span>批量导入</span>
            </div>
            <div class="operation-block" @click="exportExcel">
                <i class="el-icon-download"></i>
                <span>导出用户</span>
            </div>
            <!-- <el-col :span="6">
                <div class="operation-block" @click="delUser">
                    <i class="el-icon-delete"></i>
                    <span>删除</span>
                </div>
            </el-col> -->
            <a :href="base_url + '/index/user/excel'" id="export"></a>
        </div>
        <add></add>
        <import-excel></import-excel>
    </div>
</template>

<script>
let Base_Url = process.env.API_ROOT;
import user from "@/api/user";
import { mapGetters } from "vuex";

import add from "./add";
import importExcel from "./import_excel";

export default {
    name: "operation-row",
    computed: {
        ...mapGetters("personnel", ["wait_del_list"])
    },
    components: {
        add,
        importExcel
    },
    data() {
        return {
            search_value: undefined,
            search_type: undefined,
            base_url: Base_Url
        };
    },
    methods: {
        refreshUserData() {
            let params = {
                fieldName: this.search_type || '',
                fieldValue: this.search_value || '',
                pageNumber: 1
            }
            user.getTableData(params).then(res => {
                this.$store.commit("personnel/CHANGE_USER_LIST", res);
            }).catch(err => {
                this.$message.error(err);
            });
        },
        add() {
            this.$store.commit(
                "personnel/CHANGE_IS_ADD_USER_DIALOG_SHOW",
                true
            );
        },
        importExcel() {
            this.$store.commit(
                "personnel/CHANGE_IS_IMPORT_EXCEL_DIALOG_SHOW",
                true
            );
        },
        delUser() {
            user
                .delUsers(this.wait_del_list)
                .then(res => {
                    this.$message({
                        message: "删除成功!",
                        type: "success"
                    });
                    this.refreshUserData();
                })
                .catch(err => {
                    this.$message({
                        message: "哪里出现了问题~~~",
                        type: "warning"
                    });
                });
        },
        exportExcel() {
            this.$confirm("确认导出全部用户?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消"
            })
                .then(() => {
                    document.getElementById("export").click();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已确认取消"
                    });
                });
        }
    }
};
</script>

<style>
.operation-search-form {
    display: inline-block;
    vertical-align: top;
}
.operation-row {
    text-align: center;
    vertical-align: top;
    float: right;
}
.operation-block {
    width: 120px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    border: 1px solid #e4ebf0;
    border-radius: 2px;
    margin-left: 18px;
    float: left;
}
.operation-block span {
    margin-left: 12px;
}
.el-select .el-input {
    width: 130px;
  }
</style>
